<template>

    <div class="chart-container">
        <!-- <div class="homes">

        <div id="echartsExample"></div>
    </div> -->
        <el-row>
            <el-col :span="12">
                <div id="chartColumn" class="box" style=" height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartBar" class="box" style="height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartLine" class="box" style=" height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartPie" class="box" style="height:400px;"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    mounted() {

        this.drawColumnChart();
        this.drawBarChart();
        this.drawLineChart();
        this.drawPieChart();
    },
    created() {
        // this.drawColumnChart();
        // this.drawBarChart();
        // this.drawLineChart();
        // this.drawPieChart();
    },


    methods: {
        drawColumnChart() {
            let myChart = this.$echarts.init(document.getElementById("chartColumn"));

            let option = {
                title: { text: 'Column Chart' },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            myChart.setOption(option)
        },
        drawBarChart() {
            let myChart = this.$echarts.init(document.getElementById("chartBar"));
            let option = {
                title: { text: 'Column Chart' },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            myChart.setOption(option)
        },
        drawLineChart() {
            let myChart = this.$echarts.init(document.getElementById("chartLine"));
            let option = {
                title: {
                    text: 'Line Chart'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '搜索引擎']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
                ]
            };
            myChart.setOption(option)
        },
        drawPieChart() {
            let myChart = this.$echarts.init(document.getElementById("chartPie"));
            let option = {
                title: {
                    text: 'Pie Chart',
                    subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1548, name: '搜索引擎' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            myChart.setOption(option)
        },

    },
};
</script>

<style scoped>


.chart-container {
    background-color: white;
    height: 100%;
    width: 100%;
}

.el-col {
    padding: 30px;
}
</style>